<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="searchFrom.factory_name" placeholder="工厂名称" style="width: 120px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="searchFrom.supplier_id" placeholder="工厂ID" style="width: 120px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="searchFrom.name" placeholder="工厂用户名称" style="width: 130px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchFrom.status" placeholder="用户状态" style="width: 120px" size="small" clearable>
                        <el-option value="0" label="启用"></el-option>
                        <el-option value="1" label="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn" size="small">查询</el-button>
                    <el-button type="warning" icon="el-icon-plus" size="small" @click="addVisible=true">添加用户</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" v-loading="loading" :max-height="tableHeight" size="mini">
                <el-table-column prop="factory_name" label="工厂名称"></el-table-column>
                <el-table-column prop="supplier_id" label="工厂ID"></el-table-column>
                <el-table-column prop="name" label="工厂用户名称"></el-table-column>
                <el-table-column prop="phone" label="手机号码"></el-table-column>
                <el-table-column prop="status" label="同步用户状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value=0 :inactive-value=1
                                   @change="changStatus(scope.$index, scope.row.status)"></el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--添加用户-->
        <el-dialog title="添加工厂用户" width="500px" :visible.sync="addVisible" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form>
                <el-form-item label="选择工厂">
                    <el-select v-model="addForm.supplier_id" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 60%"
                               :remote-method="searchFactoryBtn" :loading="searchFactoryLoading" @change="changeFactoryBtn" clearable>
                        <el-option v-for="(factory_name, supplier_id) in factoryList" :label="factory_name" :value="supplier_id" :key="supplier_id" ></el-option>
                    </el-select>
                    <span style="color: darkred">&nbsp;搜索输入</span>
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input size="small" v-model.trim="addForm.name" style="width: 60%" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input size="small" v-model.trim="addForm.phone" style="width: 60%" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="addVisible=false" plain>退 出</el-button>
                <el-button type="primary" size="small" @click="addUser" :loading="userLoading">保 存</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
import {userGcList, userGcSet, userGcAdd} from "@/api/user";
import {factorySearch} from "@/api/produce/factory";

export default {
    name: 'factory_user',
    props: {
        user: {
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            isLoad: false,//子组件是否已加载过
            searchFrom: {
                name: '',
                status: '',
                supplier_id: '',
                factory_name: ''
            },

            selectIndex: 0,
            loading: false,
            data: [],
            page: 1,
            limit: 20,
            total: 0,
            tableHeight: window.innerHeight-284,

            syncLoading: false,

            factoryList: [],
            searchFactoryLoading: false,

            //新增用户
            addVisible: false,
            userLoading: false,
            addForm: {
                name: '',
                phone: '',
                factory_name: '',
                supplier_id: '',
            }
        }
    },
    methods: {
        searchBtn(){
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page){
            this.page = page;
            this.getData();
        },
        //获取数据
        getData(){
            let param = {
                page: this.page,
                limit: this.limit,
                name: this.searchFrom.name,
                status: this.searchFrom.status,
                factory_name: this.searchFrom.factory_name,
                supplier_id: this.searchFrom.supplier_id
            };
            this.loading = true;
            userGcList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(()=>{
                this.loading = false;
            });
        },
        //修改状态
        changStatus(index, value){
            let msg = !value ? "启用" : "禁用"
            this.$confirm(msg+"用户，请确认！！！", '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: !value ? 'success' : 'warning'
            }).then(() => {
                let param = {
                    id: this.data[index].id,
                    status: value
                };
                userGcSet(param).then((res) => {
                    if(res.code === 0){
                        this.$message.success(msg+"成功");
                    }else{
                        this.$message.error(res.msg);
                        this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    }
                }).catch(()=>{
                    this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                });
            }).catch(() => {
                this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                this.$message.info("操作已取消");
            });
        },
        //搜索工厂
        searchFactoryBtn(query){
            if(query == ""){
                return;
            }
            factorySearch({factory_name: query, tab: "1,2"}).then((res) => {
                this.factoryList = res.data;
            });
        },
        //选择工厂后 触发事件
        changeFactoryBtn(value){
            this.addForm.factory_name = this.factoryList[value];
        },
        //新增用户
        addUser(){
            this.userLoading = true;
            userGcAdd(this.addForm).then((res) => {
                this.userLoading = false;
                if(res.code === 0){
                    this.$message.success("新增工厂用户成功");
                    this.addVisible = false;
                    this.searchBtn();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.userLoading = false;
            })
        },
    },
    mounted(){

    },
}
</script>
<style scoped>

</style>
